import styles from './index.module.scss'
import cm from 'classnames'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useMemo } from 'react'

const navList = [
  { label: '首页', url: '/' },
  { label: '电影', url: '/movie' },
  { label: '电视剧', url: '/drama' },
  { label: '综艺', url: '/variety' },
  { label: '动漫', url: '/animation' },
  { label: '电视直播', url: '/live' },
  { label: '体育', url: '/sports' }
]

const Index = () => {
  const { asPath, pathname, query, currentUrl } = useRouter()
  const currPath = '/' + pathname.split('/')[1]
  const isCurrUrlActive = url => {
    return currPath === url || '/' + query.tab === url || currentUrl === url
  }

  const urlArr = ['/movie', '/drama', '/variety', '/animation', '/live', '/sports']

  const isTransitionUrl = ['/', '/movie', '/drama', '/variety', '/animation']

  const navClass = useMemo(() => {
    if (isTransitionUrl.includes(pathname)) {
      return styles.navHeavy
    }
    return styles.navNormal
  }, [pathname])
  const itemClass = item =>
    cm(styles.li, {
      [styles.liActive]: isCurrUrlActive(item.url)
    })
  return (
    <>
      <nav className={cm(styles.nav, navClass)}>
        {navList.map((item, index) => {
          return (
            <Link href={item.url} key={index} className={itemClass(item, index)} onClick={() => sessionStorage.clear()}>
              {urlArr.includes(asPath) && isCurrUrlActive(item.url) ? <h1>{item.label}</h1> : <p>{item.label}</p>}
            </Link>
          )
        })}
      </nav>
    </>
  )
}

export default Index
